<template>
  <div v-loading="loading" >
    <div>
      <el-row>
        <el-col :span="20">
          <el-form v-model="search" :inline="true">
            <el-form-item>
              <el-input placeholder="输入搜索关键字" v-model="search.name"
                        clearable/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="load">查询</el-button>
              <el-button type="info" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-button size="mini" type="success" @click="addRole">新增</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table

        style="width: 100%"
        border
        :data="tableData">
      <el-table-column
          prop="name"
          label="名称"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="code"
          label="唯一编码"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="remark"
          label="描述"
          align="center"
          show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          prop="statu"
          label="状态"
          align="center">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.statu === 1" type="success">正常</el-tag>
          <el-tag size="small" v-else-if="scope.row.statu === 0" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="icon"
          label="操作"
          align="center">

        <template slot-scope="scope">
          <el-button type="text" @click="permHandle(scope.row.id)">分配权限</el-button>
          <el-divider direction="vertical"></el-divider>

          <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>

          <template>
            <el-popconfirm title="确定删除吗？" @confirm="delHandle(scope.row.id)">
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--    授权-->
    <role-assign-permissions ref="assignPermissions" @handle="handleSuccess"></role-assign-permissions>
    <!--    添加角色信息-->
    <role-add-role-info ref="addRoleInfo" @handle="handleSuccess"></role-add-role-info>
  </div>
</template>

<script>

import {getRoleList, delRole} from "@/api/sys/role";
import RoleAddRoleInfo from "./RoleAddRoleInfo";
import RoleAssignPermissions from "./RoleAssignPermissions";

export default {
  name: "Role",
  components: {
    RoleAddRoleInfo,
    RoleAssignPermissions
  },
  data() {
    return {
      search: {
        name: ''
      },
      loading: false,
      tableData: [],
      total: 0,
      pageSize: 5,
      currentPage: 1
    }
  },
  methods: {
    //加载数据
    load() {
      this.loading = true
      const param = {
        name: this.search.name,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }
      getRoleList(param).then(res => {
        this.tableData = res.data.records
        this.currentPage = res.data.current
        this.pageSize = res.data.size
        this.total = res.data.total
        this.loading = false
      })
    },
    //重置
    reset() {
      this.search = ""
      this.pageSize = 5
      this.currentPage = 1
      this.load()
    },
    //分配权限
    permHandle(id) {
      this.$refs.assignPermissions.setRoleId(id)
      this.$refs.assignPermissions.permDialogVisible = true
    },
    addRole() {
      this.$refs.addRoleInfo.openDialog()
      // this.$refs.addRoleInfo.dialogVisible = true
    },
    //编辑
    editHandle(id) {
      this.$refs.addRoleInfo.openDialog()
      this.$refs.addRoleInfo.setEditForm(id)
    },
    //删除
    delHandle(id) {
      delRole(id).then(res => {
        if (res.code === 200) {
          this.load()
        }
      })
    },
    //分页查询
    //页大小发生改变时触发
    handleSizeChange(pageSize) {
      console.log("pageSize:" + pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(currentPage) {
      console.log("currentPage:" + currentPage)
      this.currentPage = currentPage
      this.load()
    },
    handleSuccess(res) {
      if (res.code === 200) {
        this.load()
      }
    }
  },
  created() {
    this.load()
  }
}
</script>

<style scoped>
</style>
